// https://juejin.im/post/5de4f87cf265da05c7722c20

/**
 * 获取、设置打印样式
 * @returns
 */
const getStyle = () => {
  const styleContent = `
    #print-container { display: none; }
    @media print {
      body > :not(.print-container) { display: none; }
      html, body { display: block !important; }
      #print-container { display: block; }
    }
  `
  const style = document.createElement('style')
  style.innerHTML = styleContent
  return style
}

/**
 * 清空打印内容
 */
const cleanPrint = () => {
  const div = document.getElementById('print-container')
  div && document.querySelector('body')?.removeChild(div)
}

/**
 * 新建DOM，将需要打印的内容填充到DOM
 * @param {*} html
 * @returns
 */
const getContainer = html => {
  cleanPrint()
  const container = document.createElement('div')
  container.setAttribute('id', 'print-container')
  container.innerHTML = html
  return container
}

/**
 * 图片完全加载后再调用打印方法
 * @param {*} dom
 * @returns
 */
const getLoadPromise = dom => {
  const imgs = dom.querySelectorAll('img')
  const _imgsArr = [].slice.call(imgs)

  if (_imgsArr.length === 0) {
    return Promise.resolve()
  }

  let finishedCount = 0
  return new Promise(resolve => {
    function check() {
      finishedCount += 1
      if (finishedCount === _imgsArr.length) {
        resolve(null)
      }
    }
    _imgsArr.forEach(img => {
      img.addEventListener('load', check)
      img.addEventListener('error', check)
    })
  })
}

/**
 * 打印指定 HTML
 * @param {*} html
 */
export const printHtml = html => {
  const style = getStyle()
  const container = getContainer(html)

  document.body.appendChild(style)
  document.body.appendChild(container)
  getLoadPromise(container).then(() => {
    window.print()
    document.body.removeChild(style)
    document.body.removeChild(container)
  })
}
